<script setup lang="ts">
import {reactive, ref} from "vue";
import {allDelete, allRead, getMessageList} from "@/api/interfaceApi/https";
let messageList = ref([]);
let allMessage = ref([]);
const receiverId = '1'
let allParams = ref({
    pageSize:1000,
    pageNum:1,
    receiverId:receiverId
})
let params = ref({
    pageSize:5,
    pageNum:1,
    receiverId:receiverId
})
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref();
    getMessageList(receiverId,allParams.value).then((res)=>{
        allMessage.value = res.rows
        console.log(allMessage.value)
    })

function getList(){
    getMessageList(receiverId,params.value).then((res)=>{
        messageList.value = res.rows
        total.value = res.total
    })
}
getList()

const handleSizeChange = (val: number) => {
    params.value= {
        pageNum: 1,
        pageSize: val,
        receiverId:'1'
    }
    getList()
}
const handleCurrentChange = (val: number) => {
    params.value= {
        pageNum: val,
        pageSize: pageSize.value,
        receiverId:'1'
    }
    getList()
}
let arr = ref([])
let arrAll = ref([])
const allIsRead = ()=>{
    const list = allMessage.value.filter((item)=>{
        return item.isRead === '0'
    })
    list.forEach((item)=>{
        arr.value.push(item.id)
    })
    allRead(arr.value).then((res)=>{
        if (res.code === 200){
            arr.value = []
            getList()
        }
    })
}
const allIsDelete = ()=>{
    allMessage.value.forEach((item)=>{
        arrAll.value.push(item.id)
    })
    console.log(arrAll.value)
    allDelete(arrAll.value).then((res)=>{
        if (res.code === 200){
            arrAll.value = []
            getList()
        }
    })
}
</script>

<template>
 <div class="box">
     <div class="message-container">
         <div class="message-top">
             <span>系统消息</span>
             <div>
                 <el-button size='small' @click="allIsRead" :disabled="messageList.length === 0">
                     全部已读
                 </el-button>
                 <el-button size='small' @click="allIsDelete" :disabled="messageList.length === 0">
                     全部删除
                 </el-button>
             </div>
         </div>
         <div class="message-body" >
             <el-empty description="暂无消息"  v-if="messageList.length === 0"/>
             <div v-else>
                 <ul class="list">
                     <li v-for="item in messageList" :key="item.id">
                         <el-badge :is-dot="item.isRead === '0'" class="item">{{ item.psyMessages[0].title }}</el-badge>
                         <div class="message">{{item.psyMessages[0].content }}</div>
                     </li>
                 </ul>
                 <div class="pagination" >
                     <el-pagination
                         v-model:current-page="params.pageNum"
                         v-model:page-size="pageSize"
                         :page-sizes="[5, 10, 15]"
                         :small="false"
                         :disabled="false"
                         :background="false"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                     />
                 </div>
             </div>
         </div>
     </div>
 </div>
</template>

<style scoped lang="scss">
.box {
    min-height: 91vh;
    padding: 10px 5px;
    background-color: #F2F3F4;
    width: 100%;
    .message-container {
        padding: 50px 40px;
        width: 98%;
        margin: auto;
        background-color: white;
        min-height: 400px;
        .message-top {
            display: flex;
            justify-content: space-between;
        }
        .message-body {
            ul {
                margin-top: 20px;
                li {
                    margin-bottom: 10px;
                    padding: 10px;
                    border: 1px solid #D7D7D7;
                    border-radius: 5px;
                    height: 100px;
                    width: 100%;
                    .message {
                        margin-top: 12px;
                    }
                }
            }
            .pagination {
                display: flex;
                justify-content: right;
            }
        }
    }
}
::v-deep(.el-badge__content.is-fixed.is-dot) {
    right: 0;
    top: 5px;
}
::v-deep(.el-pagination) {
    margin-top: 40px;
}
</style>
